<script setup lang="ts">
import {ref,onMounted} from 'vue'
import * as echarts from "echarts";
const charts = ref()
onMounted(()=>{
  const myCharts = echarts.init(charts.value)
  myCharts.setOption({
    title:{
      text:'访问量'
    },
    xAxis:{
      type:'category',
      //两侧不留白
      boundaryGap:false,
      //坐标轴的分割线
      splitLine:{
        show:false
      },
      data:['周一','周二','周三','周四','周五','周六','周日']
    },
    yAxis:{
      splitLine:{
        show:false
      },
      //轴线
      axisLine:{
        show:true
      },
      //轴线刻度
      axisTick:{
        show:true
      }
    },
    gird:{
      left:0,
      top:0,
      right:0,
      bottom:0
    },
    series:[
      {
        type:'line',
        data:[120,340,66,888,100,1200,100],
        smooth:true,
        areaStyle:{
          color:{
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
              offset: 0, color: 'orange' // 0% 处的颜色
            }, {
              offset: 1, color: 'skyblue' // 100% 处的颜色
            }],
            global: false // 缺省为 false
          }
        }
      }
    ]
  })
})
</script>

<template>
  <div class="line-container">
    <div class="line-tit">
      <p class="tit">未来7天游客量趋势图</p>
      <p class="bg"></p>
    </div>
    <div class="charts" ref="charts">
    </div>
  </div>
</template>

<style scoped lang="scss">
.line-container{
  margin: 0 10px;
  background: url("../../images/dataScreen-main-cb.png") no-repeat;
  background-size: 100% 100%;
  .line-tit{
    margin-left: 20px;
    .tit{
      color: white;
      font-size: 20px;
      margin:10px 0;
    }
    .bg{
      width: 68px;
      height: 7px;
      background: url("../../images/dataScreen-title.png");
    }
  }
  .charts{
    margin-top: 20px;
    height: calc(100% - 65px);
  }
}
</style>